<template>
  <div class="word-editor">
    <Editor
      api-key="no-api-key" 
      :init="tinymceInitOptions"
      :model-value="content"
      @update:model-value="handleContentChange"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';

// 接收父组件传递的内容
const props = defineProps({
  content: {
    type: String,
    default: ''
  }
});

// 向父组件传递内容变化
const emit = defineEmits(['content-change']);

// TinyMCE配置
const tinymceInitOptions = ref({
  height: 500,
  menubar: true,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
  ],
  toolbar: 'undo redo | formatselect | ' +
  'bold italic backcolor | alignleft aligncenter ' +
  'alignright alignjustify | bullist numlist outdent indent | ' +
  'removeformat | help',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
  branding: false // 隐藏TinyMCE品牌标识
});

// 内容变化时触发事件
const handleContentChange = (value) => {
  emit('content-change', value);
};
</script>

<style scoped>
.word-editor {
  width: 100%;
  height: 100%;
}
</style>